<template>
  <div class="category-index">
    <div class="category-menus">
      <Button type="primary" @click="addCategory"><Icon type="md-add-circle" /><span class="add-category-span"></span>添加课程类目</Button>
    </div>
    <!--表格头部信息条-->
    <div class="ivu-mt ivu-alert ivu-alert-info ivu-alert-with-icon">
      <span class="ivu-alert-icon"><i class="ivu-icon ivu-icon-ios-information-circle"></i></span>
      <span class="ivu-alert-message">
        <div style="font-size: 14px;">总记录数 <strong style="color: rgb(45, 140, 240);">{{ cagetoryList.length }}</strong> 条</div>
      </span>
      <span class="ivu-alert-desc"></span>
    </div>
    <div class="table-paper">
      <Table :columns="columns" :data="cagetoryList"></Table>
    </div>
    <!--添加题目抽屉-->
    <div class="add-paper-modal">
      <Drawer title="添加选项" :closable="false" v-model="showCategoryDrawer" width="40%" scrollable class="paper-subject-drawer">
        <div class="ivu-alert ivu-alert-warning ivu-alert-with-desc"><Icon type="md-information-circle" class="warm-icon"/>
          <span class="ivu-alert-desc">添加课程类目时，如若添加的是顶级类目，则无需选择父类目，系统默认将其设置为顶级类目。</span></div>
        <Form :model="categoryEntity" ref="categoryForm" :rules="categoryRules" class="add-subject-form">
          <FormItem label="类目名称" prop="categoryName">
            <Input v-model="categoryEntity.categoryName" placeholder="请输入类目名称"></Input>
          </FormItem>
          <FormItem label="所属父类目" prop="parentId">
            <Select v-model="categoryEntity.parentId">
              <Option v-for="category in cagetoryList" :value="category.id">{{ category.categoryName }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div class="page-drawer-footer"><Button type="primary" @click="saveCategory('categoryForm')">确定</Button></div>
      </Drawer>
    </div>
  </div>
</template>

<script>
import { globalUrl } from '@/api/doMain'

export default {
  inject: ['reload'], // 引入局部刷新到组件
  name: 'Category',
  created () {
    this.queryList()
  },
  data () {
    return {
      columns: [
        { title: 'Id', key: 'categoryId', type: 'selection', width: 55 },
        { title: '类目名称', key: 'categoryName' },
        { title: '父类目', key: 'parentName' },
        {
          title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div',
              this.dateFormat(params.row.createTime)
            )
          }
        }
      ],
      cagetoryList: [],
      categoryEntity: {},
      showCategoryDrawer: false,
      categoryRules: {}
    }
  },
  methods: {
    queryList () {
      const that = this
      this.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.cagetoryList = response.data.data
      })
    },
    addCategory () {
      const that = this
      this.showCategoryDrawer = true
      this.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.cagetoryList = response.data.data
      })
    },
    // 保存类目
    saveCategory () {
      const that = this
      this.http.post(globalUrl + '/category/addSingle', that.categoryEntity).then(function (response) {
        console.log(response)
        if (response.data.code === '000000') {
          that.msg.success('类目添加成功')
        } else {
          that.msg.error('类目添加失败，请稍后重试')
        }
        that.reload()
      })
    }
  }
}
</script>

<style>
@import "../assets/base.css";
</style>
